<template>
  <transition name="x-dialog-fade" @after-leave="handleAfterLeave">
    <el-dialog :title="title" :visible.sync="visible" :close-on-click-modal="false" :class="customClass">
      <div v-html="content"/>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="showCancel" @click="close">取消</el-button>
        <el-button type="primary" @click="ok">确定</el-button>
      </div>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      title: '',
      content: '',
      onClose: null,
      onOk: null,
      showCancel: false,
      customClass: ''
    }
  },

  methods: {
    handleAfterLeave() {
      this.$destroy(true)
      this.$el.parentNode.removeChild(this.$el)
    },

    close() {
      this.visible = false
      if (typeof this.onClose === 'function') {
        this.onClose(this)
      }
    },

    ok() {
      this.visible = false
      if (typeof this.onOk === 'function') {
        this.onOk(this)
      }
    }
  }
}
</script>
